<!--
 * @Descripttion: 
 * @version: 
 * @Author: 韩应波
 * @Date: 2020-12-10 10:45:09
 * @LastEditors: 韩应波
 * @LastEditTime: 2021-01-06 15:14:43
-->
<template>
  <div>
    <div style="padding-left: 14px" :key="i" v-for="(page, i) of data">
      <H :level="page.type === '-1' ? '2' : '3'" :id="page.id">
        <el-checkbox
          v-if="page.label && page.type !== '-1'"
          v-model="page.hasPermission"
          :true-label="1"
          :false-label="0"
          >{{ page.label }}</el-checkbox
        >
      </H>
      <!-- <el-switch
        v-if="page.label && page.type !== '-1'"
        v-model="page.hasPermission"
        active-color="#13ce66"
        active-text="进入"
        :active-value="1"
        :inactive-value="0"
      >
      </el-switch> -->

      <!-- <el-switch
        v-for="(v, i) of page.pageButtonList"
        :key="i"
        v-model="v.hasPermission"
        active-color="#13ce66"
        :active-text="v.name"
        :active-value="1"
        :inactive-value="0"
      >
      </el-switch> -->
      <el-checkbox
        v-model="v.hasPermission"
        v-for="(v, i) of page.pageButtonList"
        :key="i"
        :true-label="1"
        :false-label="0"
      >
        {{ v.name }}
      </el-checkbox>

      <PermissionTree :data="page.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PermissionTree',
  components: {
    H: {
      render: function (h) {
        return h(
          'h' + this.$attrs.level, // 标签名称
          this.$slots.default // 子节点数组
        )
      }
    }
  },
  props: ['data'],
  data() {
    return {}
  },
  methods: {
    nodeClick(pageResourceId) {
      let selectedNode = document.getElementById(pageResourceId)
      selectedNode && selectedNode.scrollIntoView({ behavior: 'smooth' })
    }
  }
}
</script>